<template>
  <div class="row" :style="{ margin: !$q.screen.gt.sm ? '' : '0px 15px 0px 15px' }">
    <q-tabs
      align="left"
      active-color="primary"
      class="bg-white col-12"
      dense
      swipeable
      inline-label
      indicator-color="transparent"
      :outside-arrows="$q.platform.is.electron ? true : false"
      :breakpoint="0"
    >
      <q-route-tab class="tagView" to="/" no-caps content-class="tagView-q-router-tab" :style="isWeChart ? ' line-height: normal' : ''">
        <template slot="default">
          <q-icon size="1.3rem" name="home" />
          <div class="line-limit-length" style="margin: 0px 5px 0px 5px">{{ $t('menuItem.home') }}</div>
        </template>
      </q-route-tab>

      <template v-for="(v, i) in tagView">
        <q-route-tab class="tagView" :key="v.fullPath + i" :to="v.fullPath" no-caps content-class="tagView-q-router-tab" :style="isWeChart ? ' line-height: normal' : ''">
          <template slot="default">
            <q-icon size="1.3rem" v-if="v.icon" :name="v.icon" />
            <div class="line-limit-length">{{ v.title }}</div>
            <q-icon class="tagView-remove-icon" style="display: inline-flex" name="close" @click.prevent.stop="removeAtagView(i)" />
            <q-menu touch-position context-menu>
              <q-list dense>
                <q-item clickable v-close-popup>
                  <q-item-section @click="refreshSelectedTag(i)">
                    <!-- 刷新 -->
                    {{ $t('menuItem.close_other') }}
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section @click="removeOthersTagView(i)">
                    <!-- 关闭其他 -->
                    {{ $t('menuItem.close_other') }}
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section @click="removeRightTagView(i)">
                    <!-- 关闭右侧 -->
                    {{ $t('menuItem.close_right') }}
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section @click="removeLeftTagView(i)">
                    <!-- 关闭左侧 -->
                    {{ $t('menuItem.close_left') }}
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section @click="removeAllTagView">
                    <!-- 关闭所有 -->
                    {{ $t('menuItem.close_all') }}
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </template>
        </q-route-tab>
      </template>
    </q-tabs>
  </div>
</template>

<script>

export default {
  name: 'tagView',
  data () {
    return {
      tagView: this.$store.getters.getTagView
    }
  },
  computed: {

    getTagView () {
      return this.$store.getters.getTagView
    },

    /**
     * 如果是微信浏览器，则添加 line-height: normal 样式
     * @returns {boolean}
     */
    isWeChart () {
      return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
    }

  },
  watch: {
    getTagView (n, o) {
      this.tagView = n
      this.$store.commit('SET_KEEPALIVE_LIST', this.tagView)
      window.sessionStorage.setItem('tagView', JSON.stringify(this.tagView))
    }
  },
  methods: {

    removeAllTagView () {
      this.$store.commit('REMOVE_TAG_VIEW')
    },

    removeAtagView (i) {
      this.$store.commit('REMOVE_TAG_VIEW', i)
    },

    removeLeftTagView (i) {
      this.$store.commit('REMOVE_TAG_VIEW', { side: 'left', index: i })
    },

    removeRightTagView (i) {
      this.$store.commit('REMOVE_TAG_VIEW', { side: 'right', index: i })
    },

    removeOthersTagView (i) {
      this.$store.commit('REMOVE_TAG_VIEW', { side: 'others', index: i })
    }

  }
}
</script>
<style lang="sass">
  /* 重置 quasar 内部 tab 样式 */
.tagView-q-router-tab
  min-width: 40px !important
</style>
<style lang="css" scoped>
.tagView {
  margin: 1.5px 3px 0 3px;
  min-height: 20px;
  padding: 0 8px;
  background: white;
  transition: all 0.5s;
  border-radius: 0;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tagView-remove-icon {
  font-size: 1rem;
  border-radius: 0.2rem;
  opacity: 0.58;
  transition: all 0.3s;
}

.tagView-remove-icon:hover {
  opacity: 1;
}

.line-limit-length {
  margin: 0px 5px 0px 7px;
  overflow: hidden;
  max-width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
